<template>
  <div class="formFontStyle" :class="editable ? 'peopleBoxCon1' : 'peopleBoxCon'">
    <a-form
      class="formStyleShow"
      :form="form"
      :labelCol="{ span: status === 'deliveryRecord' ? 3 : status === 'sendResume' ? 5 : 10 }"
      :wrapperCol="{ span: status === 'sendResume' ? 10 : 12 }"
    >
      <a-row v-if="isReward && formFields">
        <template v-if="sortedKeys">
          <div v-for="key in sortedKeys" :key="key">
            <a-col :span="status === 'sendResume' || status === 'deliveryRecord' ? 24 : 12" v-if="key === 'intentionJob'">
              <a-form-item
                label="意向岗位"
                v-if="editable"
                :label-col="{ span: status === 'deliveryRecord' ? 3 : status === 'sendResume' ? 5 : 10 }"
                :wrapper-col="{ span: status === 'sendResume' ? 10 : 12 }"
              >
                <a-tree-select
                  :showSearch="true"
                  treeNodeFilterProp="title"
                  style="width: 100%"
                  :tree-data="positionTypes"
                  tree-checkable
                  :replaceFields="replaceFields"
                  v-decorator="['intentionJob', decoratorIntentionJob(formFields[key])]"
                  placeholder="请选择意向岗位"
                  @change="onJobChange"
                />
              </a-form-item>
              <a-form-item
                label="意向岗位"
                :label-col="{ span: status === 'deliveryRecord' ? 3 : status === 'sendResume' ? 5 : 10 }"
                :wrapper-col="{ span: status === 'sendResume' ? 10 : 12 }"
                v-if="!editable"
                class="widCompany"
                >{{ dataSource && dataSource.intentionJob ? dataSource.intentionJob : "--" }}</a-form-item
              >
            </a-col>
            <a-col :span="status === 'sendResume' || status === 'deliveryRecord' ? 24 : 12" v-else-if="key === 'skill'">
              <a-form-item
                label="擅长技能"
                v-if="editable"
                :label-col="{ span: status === 'deliveryRecord' ? 3 : status === 'sendResume' ? 5 : 10 }"
                :wrapper-col="{ span: status === 'sendResume' ? 10 : 12 }"
              >
                <a-select
                  style="width: 100%"
                  :maxTagCount="3"
                  mode="tags"
                  placeholder="请输入擅长技能"
                  v-decorator="['skill', decoratorIntentionJob(formFields[key])]"
                ></a-select>
              </a-form-item>
              <a-form-item
                label="擅长技能"
                :label-col="{ span: status === 'deliveryRecord' ? 3 : status === 'sendResume' ? 5 : 10 }"
                :wrapper-col="{ span: status === 'sendResume' ? 10 : 12 }"
                v-if="!editable"
                class="widCompany"
                >{{ dataSource && dataSource.skill ? dataSource.skill : "--" }}</a-form-item
              >
            </a-col>
            <a-col :span="status === 'sendResume' || status === 'deliveryRecord' ? 24 : 12" v-else-if="key === 'workYears'">
              <a-form-item
                label="工作经验"
                v-if="editable"
                :label-col="{ span: status === 'deliveryRecord' ? 3 : status === 'sendResume' ? 5 : 10 }"
                :wrapper-col="{ span: status === 'sendResume' ? 14 : 14 }"
              >
                <a-input-number
                  style="width: 45%"
                  :min="0"
                  @change="changeWorkYears"
                  placeholder="请输入工作经验"
                  v-decorator="['workYears', decoratorIntentionJob(formFields[key])]"
                />
                <div v-if="key === 'workYears'" class="widWorkYears" :style="{ right: status === 'sendResume' ? '47%' : '41%' }">年</div>
                <a-checkbox style="margin-left: 29px" v-model="workYearsCheckbox" @change="onChange"
                  ><span style="font-size: 12px">暂无工作经验</span></a-checkbox
                >
              </a-form-item>
              <a-form-item
                v-else
                label="工作经验"
                :label-col="{ span: status === 'deliveryRecord' ? 3 : status === 'sendResume' ? 5 : 10 }"
                :wrapper-col="{ span: status === 'sendResume' ? 10 : 12 }"
                class="widCompany"
                >{{ dataSource && dataSource.workYears ? dataSource.workYears : "--" }}年</a-form-item
              >
            </a-col>
            <a-col :span="status === 'sendResume' || status === 'deliveryRecord' ? 24 : 12" v-else>
              <XqItem
                v-if="detailedShow"
                ref="XqItem"
                :form="form"
                :dataSource="dataSource"
                :item="formFields[key]"
                :dynamicData="dynamicData"
                :editable="editable"
                :validator="getValidator(key)"
                @change="XqItemChange($event, formFields[key], dataSource, dynamicData)"
              />
            </a-col>
          </div>
        </template>
        <template v-else>
          <div v-for="item in formFields" :key="item.model">
            <a-col :span="24">
              <XqItem
                ref="XqItem"
                :form="form"
                :dataSource="dataSource"
                :item="item"
                :dynamicData="dynamicData"
                :editable="editable"
                :validator="getValidator(item.model)"
                @change="XqItemChange($event, item, dataSource, dynamicData)"
              />
            </a-col>
          </div>
        </template>
      </a-row>
    </a-form>
    <div v-show="editable && remove && status === 'add'" class="DynamicForm">
      <a-space>
        <a-button type="danger" ghost @click="onRemove">删 除</a-button>
      </a-space>
    </div>
    <div v-show="editable" class="DynamicForm">
      <a-space>
        <a-button v-if="remove" type="danger" ghost @click="onRemove">删 除</a-button>
        <a-button type="primary" @click="save">保 存</a-button>
        <a-button @click="cancel">取 消</a-button>
      </a-space>
    </div>
  </div>
</template>
<script>
import XqFormMixin from "xqjr-plugin-form/mixins/XqFormMixin";
const FormMixin = XqFormMixin();
import moment from "moment";
import { mapState } from "vuex";
export default {
  mixins: [FormMixin],
  props: {
    sortedKeys: {
      type: Array,
      default: () => null
    },
    remove: {
      type: Boolean,
      default: false
    },
    detailedShow: {
      type: Boolean,
      default: true
    },
    dataSource: {
      type: Object,
      default: () => {}
    },
    editable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: true
    },
    workYearsNoExperience: {
      type: Boolean,
      default: false
    },
    dynamicData: {
      type: Object,
      default: () => {}
    },
    status: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    intentionJobAll: {
      type: String,
      default: ""
    },
    dataListArr: {
      type: Array,
      default: () => null
    }
  },
  data() {
    return {
      workYearsCheckbox: false,
      intentionJobText: "",
      intentionJobCopy: null,
      intentionJob: null,
      companyName: "",
      authId: undefined,
      dataList: [],
      replaceFields: {
        children: "childList",
        key: "id",
        value: "id",
        title: "name"
      },
      isReward: true,
      spouseInfo: false
    };
  },
  computed: {
    ...mapState(["recruitment"]),
    positionTypes() {
      return this.recruitment.positionTypes;
    }
  },
  watch: {
    workYearsNoExperience(val) {
      this.workYearsCheckbox = val;
    },
    intentionJobAll(val) {
      if (val) {
        this.intentionJobText = val;
      }
    },
    dataSource: {
      handler(val) {
        console.log("dataSource", val);
        if (val && val.workYears) {
          this.$nextTick(() => {
            this.form.setFieldsValue({ workYears: val.workYears });
          });
        }
      },
      immediate: true,
      deep: true
    },
    dataListArr: {
      handler(val) {
        if (val) {
          this.dataList = val.map((i) => {
            return {
              label: i.name,
              value: i.id,
              children: i.companyAuthorityList
                ? i.companyAuthorityList.map((r) => {
                    return { label: r.responsibleAuthorityName, value: r.id };
                  })
                : []
            };
          });
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  methods: {
    decoratorIntentionJob(e) {
      return e.decorator;
    },
    onJobChange(e, a, s) {
      if (e.length <= 3) {
        this.intentionJob = e;
        this.intentionJobCopy = e;
        var arr = [];
        this.positionTypes.forEach((item, index) => {
          if (item.childList && item.childList.length) {
            item.childList.forEach((item2, index2) => {
              if (item2.childList && item2.childList.length) {
                item2.childList.forEach((item3) => {
                  e.forEach((item4) => {
                    if (item4 === item3.id) {
                      arr.push(`${item.id}` + "," + `${item2.id}` + "," + item4);
                    }
                  });
                });
              }
            });
          }
        });
        this.intentionJobText = "";
        this.intentionJobText = arr.join(",") + "*" + a.join(",");
      } else {
        this.$message.warning("最多选择3个意向岗位！");
        this.$nextTick(() => {
          this.form.setFieldsValue({ intentionJob: this.intentionJobCopy });
        });
      }
    },
    onEdit() {
      this.$emit("onEdit");
    },
    filter(inputValue, path) {
      return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    },
    editShow() {
      this.$emit("edit");
      this.$nextTick(() => {
        this.setFieldsValueShow("authorityId", this.dataSource.authorityId);
      });
    },
    changeWorkYears(val) {
      console.log(val);
      this.$nextTick(() => {
        this.workYearsCheckbox = false;
      });
    },
    onChange(e) {
      if (e.target.checked) {
        this.$nextTick(() => {
          this.form.setFieldsValue({ workYears: "" });
        });
      }
      //  this.$emit("itemChange", e.target.checked, 'workYearsCheckbox', {});
    },
    onChangeAuthorityId(e, selectedOptions) {
      console.log(e, selectedOptions);
    },
    getFieldValue(key) {
      return this.form.getFieldValue(key);
    },
    setFieldsValueShow(key, value) {
      setTimeout(() => {
        this.form.setFieldsValue({ [key]: value });
      }, 100);
    },

    vilidateRetirementDate(rule, value, callback) {
      const form = this.form;
      if (this.$attrs.basicData.birthday) {
        if (moment(value).valueOf() < moment(this.$attrs.basicData.birthday).valueOf()) {
          callback("退休日期不能大于出生日期");
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    getDataRules() {
      this.getData()
        .then((res) => {
          console.log("debug log --> ", res);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    XqItemChange(val, item, dataSource, dynamicData) {
      if (item.model === "annex") {
        this.$emit("itemChange", val, item.model, dataSource);
      }
    },
    save() {
      this.getData()
        .then((res) => {
          Object.keys(res).forEach((element) => {
            if (res[element] === "true") {
              res[element] = true;
            }
            if (res[element] === "false") {
              res[element] = false;
            }
            if (res[element] && res[element]._isAMomentObject) {
              if (element === "birthday") {
                res[element] = moment(res[element]).format("YYYY-MM-DD");
              } else {
                res[element] = moment(res[element]).format("YYYY-MM-DD");
              }
            }
            if (element === "intentionJob") {
              res["intentionJob"] = this.intentionJobText;
            }
            if (Array.isArray(res[element]) && res[element].length !== 0 && res[element][0].url) {
              res[element] = res[element].map((z) => z.url);
            }
            if (Array.isArray(res[element]) && res[element].length !== 0 && element !== "skill") {
              res[element] = res[element] + "";
            }
            if (element === "workYears") {
              res["workYears"] = this.workYearsCheckbox ? 0 : res[element];
            }
          });
          this.$emit("change", res);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    onRemove() {
      this.$emit("remove");
    },
    cancel() {
      this.$emit("cancel");
    },
    onValuesChangeCustom() {}
  }
};
</script>

<style lang="scss" scoped>
.DynamicForm {
  text-align: center;
}
.widWorkYears {
  position: absolute;
  bottom: -10px;
}
</style>
<style lang="scss">
.widCompany .ant-form-item-control-wrapper .ant-form-item-control {
  .ant-form-item-children {
    display: inline-block;
    width: 68%;
    // line-height: 20px;
  }
}
.formFontStyle {
  position: relative;
  label {
    font-weight: 400 !important;
  }
  .formStyleShow {
    .ant-calendar-picker {
      width: 100%;
    }
  }
  .ant-col-13 {
    height: 40px;
    .ant-form-item-control {
      line-height: 23px;
    }
  }
  .ant-col-11 {
    line-height: 23px;
  }
  .hei40 {
    .ant-col-24 {
      height: 40px;
      .ant-form-item-control {
        line-height: 23px;
      }
    }
  }
  .peopleBoxConCZ {
    width: 72px;
    height: 32px;
    border-radius: 4px;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    // width: 80px;
    // height: 70px;
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 9;
  }
  .peopleBoxConCZCon {
    position: absolute;
    top: 33px;
    width: 80px;
    background: #fff;
    text-align: center;
    display: none;
  }
  .peopleBoxConCZCondiv {
    height: 36px;
    color: #55565d;
    line-height: 36px;
    cursor: pointer;
  }
  .peopleBoxConCZCondiv:hover {
    background: rgba(106, 102, 246, 0.16);
    color: #6a66f6;
  }
  .peopleBoxConCZ:hover .peopleBoxConCZCon {
    display: block;
  }
  .peopleBoxCon {
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
    width: 100%;
    margin: 12px 0 27px 0;
    position: relative;
    padding: 32px 0;
  }
  .peopleBoxCon1 {
    background: #ffffff;
    box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    width: 100%;
    margin: 12px 0 27px 0;
    position: relative;
    padding: 32px 0;
  }
}
</style>
<style scoped lang="scss"></style>
